<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="success" icon="el-icon-setting" @click="checkSystemStatus">
        开始检查
      </el-button>

      <span v-if="isChecking">
        <span style="font-size: 16px; color: red; padding-left: 20px;">检查系统状态中</span>
        <i class="el-icon-loading el-icon--right"></i>
      </span>

      <el-card class="box-card" style="margin-top: 40px; width: 30%;">
        <div slot="header" class="clearfix">
          <span>电源柜状态</span>
        </div>

        <div v-for="(s, index) in cabinetStatusList" :key="index" style="color: red; padding: 10px;">
          {{`电源柜：【${s.cabinet}】 / 是否连接：【${s.connected ? '是' : '否'}】 / 通信状态：【${s.readWriteNormal ? '正常' : '异常'}】`}}
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 40px; width: 30%;">
        <div slot="header" class="clearfix">
          <span>CAN设备状态</span>
        </div>

        <div v-for="(s, index) in canStatusList" :key="index" style="color:red; padding: 10px;">
          {{`CAN序号：【${s.canIndex}】 / 通信状态：【${s.connected ? '正常' : '异常'}】`}}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  checkSystemStatus
} from '@/api/system'

export default {
  name: 'SystemStatus',

  data() {
    return {
      isChecking: false,
      cabinetStatusList: [],
      canStatusList: []
    }
  },

  created() {
    // this.getSyestemStatus()
  },

  methods: {
    /*
    数据结构：
      {
        "data": {
          "cabinetStatusList": [
            { "cabinet": "A03X", "connected": false, "readWriteNormal": false },
            { "cabinet": "A03Y", "connected": false, "readWriteNormal": false },
            { "cabinet": "A04X", "connected": false, "readWriteNormal": false },
            { "cabinet": "A04Y", "connected": false, "readWriteNormal": false }
          ],
          "canStatusList": [
            { "canIndex": 0, "connected": false },
            { "canIndex": 1, "connected": false }
          ]
        }
      }
    */
    checkSystemStatus() {
      this.isChecking = true;

      this.cabinetStatusList = []
      this.canStatusList = []
      checkSystemStatus().then(rsp => {
        this.cabinetStatusList = rsp.data.data.cabinetStatusList
        this.canStatusList = rsp.data.data.canStatusList
      }).finally(() => {
        this.isChecking = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
